<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="160px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="贷款顾问" prop="empName">
            <el-input v-model="form.empName" disabled placeholder="请输入贷款顾问姓名"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="部门归属名称" prop="orgName">
            <el-input v-model="form.orgName" disabled placeholder="请输入部门归属名称"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="客户ID" prop="custId">
            <el-input v-model="form.custId" disabled placeholder="请输入选择客户"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户姓名" prop="custName">
            <el-input v-model="form.custName" disabled placeholder="请输入选择客户"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="selectUser" size="small" v-if="showSelect">选择客户</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="单件类型" prop="incomingType">
            <el-select v-model="form.incomingType" placeholder="请选择单件类型">
              <el-option v-for="dict in dict.type.crm_singlePieceType" :key="dict.value" :label="dict.label"
                         :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="银行客户经理" prop="incomingAdviser">
            <el-input v-model="form.incomingAdviser" placeholder="请输入银行客户经理"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="付费方式" prop="payType">
            <el-select v-model="form.payType" placeholder="请选择付费方式">
              <el-option v-for="dict in dict.type.crm_pay_type" :key="dict.value" :label="dict.label"
                         :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="进件银行" prop="incomingBank">
            <el-select v-model="form.incomingBank" placeholder="请选择进件银行" filterable multiple
                       style="width: 63%;">
              <el-option v-for="dict in dict.type.crm_incomingBank" :key="dict.value" :label="dict.label"
                         :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="进件额度" prop="incomingAmount">
            <el-input v-model="form.incomingAmount" placeholder="请输入进件额度"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="费率/%(如8.5)" prop="incomingRate">
            <el-input v-model="form.incomingRate" placeholder="请输入费率/%"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="诚意金" prop="sincAmount">
            <el-input v-model="form.sincAmount" placeholder="请输入诚意金"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="进件日期" prop="incomingDate">
            <el-date-picker v-model="form.incomingDate" align="right" type="date" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd" placeholder="请输入进件日期" :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="确认时间" prop="approveTime">
            <el-date-picker v-model="form.approveTime" align="right" type="date" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd" placeholder="请输入进件日期" :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="确认人姓名" prop="approveEmpName">
            <el-input v-model="form.approveEmpName" placeholder="请输入确认人姓名"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="进度" prop="status">
            <el-select v-model="form.status" placeholder="请选择进度">
              <el-option v-for="dict in dict.type.crm_status" :key="dict.value" :label="dict.label"
                         :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="批款额度" prop="approveAmount">
            <el-input v-model="form.approveAmount" placeholder="请输入批款额度"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收款额" prop="receiveAmount">
            <el-input v-model="form.receiveAmount" placeholder="请输入收款额"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="收款日期" prop="receiveDate">
            <el-date-picker v-model="form.receiveDate" align="right" type="date" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd" placeholder="请输入进件日期" :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收款银行" prop="receiveBank">
            <el-select v-model="form.receiveBank" placeholder="请选择收款银行" filterable multiple
                       style="width: 63%;">
              <el-option v-for="dict in dict.type.crm_incomingBank" :key="dict.value" :label="dict.label"
                         :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="成本费" prop="costAmount">
            <el-input v-model="form.costAmount" placeholder="请输入成本费"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注搜索" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" align="center">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
    <!-- 选择客户 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <select-cust v-on:receivingResults="receivingResults"></select-cust>
    </el-dialog>
  </div>
</template>

<script>
import {getIncoming, addIncoming, updateIncoming} from "@/api/incoming/incoming";
import selectCust from "@/views/crmsys/custinfo/myCust/selectCust";

export default {
  name: "incoming",
  props: {
    custInfo: {
      type: Object,
      default: function () {
        return {}
      }
    }//查询条件
  },
  dicts: ['crm_pay_type', 'crm_incomingBank', 'crm_status', 'crm_singlePieceType'],
  components: {selectCust},
  watch: {
    custInfo: {
      handler(newVal, oldVal) {
        this.getCustinfo();
      },
      deep: true
    }
  },
  data() {
    return {
      // 表单参数
      form: {
        custId: null,
        custName: null,
      },
      open: false,
      title: "选择客户",
      showSelect: true,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      // 表单校验
      rules: {
        custId: [{required: true, message: '请选择客户', trigger: ['change', 'blur']}],
        custName: [{required: true, message: '请选择客户', trigger: ['change', 'blur']}],
        incomingType: [{required: true, message: '请选择单件类型'}],
        incomingDate: [{required: true, message: '请输入日期'}],
        incomingAmount: [{pattern: /^[0-9]+(\.[0-9]{1,6})?$/, message: '金额格式不正确', trigger: ['change', 'blur']}],
        incomingRate: [{pattern: /^[0-9]+(\.[0-9]{1,6})?$/, message: '费率格式不正确', trigger: ['change', 'blur']}],
        sincAmount: [{pattern: /^[0-9]+(\.[0-9]{1,6})?$/, message: '金额格式不正确', trigger: ['change', 'blur']}],
        approveTime: [{ message: '请输入日期'}],
        approveAmount: [{pattern: /^[0-9]+(\.[0-9]{1,6})?$/, message: '金额格式不正确', trigger: ['change', 'blur']}],
        receiveAmount: [{pattern: /^[0-9]+(\.[0-9]{1,6})?$/, message: '金额格式不正确', trigger: ['change', 'blur']}],
        receiveDate: [{ message: '请输入日期'}],
        costFee: [{pattern: /^[0-9]+(\.[0-9]{1,6})?$/, message: '金额格式不正确', trigger: ['change', 'blur']}],
        costAmount: [{pattern: /^[0-9]+(\.[0-9]{1,6})?$/, message: '金额格式不正确', trigger: ['change', 'blur']}],
      }
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getCustinfo();
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  },
  activated() {
    this.getCustinfo();
  },
  // methods方法
  methods: {
    // 表单重置
    reset() {
      this.form = {
        id: null,
        custId: null,
        custName: null,
        incomingType: null,
        incomingBank: null,
        incomingAdviser: null,
        payType: null,
        incomingAmount: null,
        incomingRate: null,
        sincAmount: null,
        incomingDate: null,
        approveAmount: null,
        receiveAmount: null,
        receiveBank: null,
        receiveDate: null,
        costAmount: null,
        createAmount: null,
        empId: null,
        empName: null,
        createTime: null,
        updateTime: null,
        orgId: null,
        orgName: null,
        approveEmpId: null,
        approveEmpName: null,
        approveTime: null,
        contractNo: null,
        contractImage: null,
        remark: null,
        status: null,
        repaymentPeriod: null,
        repaymentTime: null,
        introduceCustId: null,
        introduceCustName: null,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {

        if (valid) {
          if (this.form.incomingBank != undefined && this.form.incomingBank != null && this.form.incomingBank != '') {
            this.form.incomingBank = this.form.incomingBank.toString()
          }
          if (this.form.receiveBank != undefined && this.form.receiveBank != null && this.form.receiveBank != '') {
            this.form.receiveBank = this.form.receiveBank.toString()
          }else{
            this.form.receiveBank=null;
          }
          if (this.form.id != null) {
            updateIncoming(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.gotoList();
            });
          } else {
            addIncoming(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.gotoList();
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.gotoList();
    },
    getCustinfo() {
      let id = this.$route.query.id;
      if (this.custInfo.id != null) {
        this.reset();
        this.form.custId = this.custInfo.id;
        this.form.custName = this.custInfo.custName;
        this.showSelect = false;
        id = null;//如果是组件跳转则是父主键的id需要清空
      }

      this.opFrom = this.$route.query.opFrom;
      if (id != null && id != "") {
        getIncoming(id).then(response => {
          this.form = response.data;
          if (this.form.incomingBank != undefined && this.form.incomingBank != null && this.form.incomingBank != '') {
            this.form.incomingBank = this.form.incomingBank.split(",")
          }
          if (this.form.receiveBank != undefined && this.form.receiveBank != null && this.form.receiveBank != '') {
            this.form.receiveBank = this.form.receiveBank.split(",")
          }
        });
      } else {
        this.form.status = "1";
        this.form.empId = this.$store.state.user.id;
        this.form.empName = this.getNameByEmpId(this.form.empId);
        this.form.orgId = this.$store.state.user.deptid;
        this.form.orgName = this.getDeptByOrgId(this.form.orgId);

      }
    },
    gotoList() {
      if (this.custInfo.id != null) {
        this.closePage();
      } else {
        //跳转到List页面
        const obj = {
          path: this.$route.query.routePath,
          query: {t: Date.now(), pageNum: this.$route.query.pageNum, custOpType: this.$route.query.custOpType}
        };
        this.$tab.closeOpenPage(obj);
      }
    },
    selectUser() {
      //选择客户
      this.open = true;
    },
    receivingResults(obj) {
      //获取客户数据
      this.form.custId = obj.id;
      this.form.custName = obj.custName;
      this.open = false;
    }, closePage() {
      this.$emit('receivingIncoming');
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>

